<template>
  <div class="loginarea">
    <!-- 显示登录弹窗-->
    <!--    <el-dialog class="loginarea" title="" :append-to-body="true"-->
    <!--               :visible.sync="dialogFormVisible" width="35%">-->
    <el-tabs v-model="eltabsActiveName">
      <el-tab-pane label="短信登录" name="smslogin">
        <!--               form 表单 短信登录s-->
        <el-form
          ref="loginFormRef"
          :rules="loginFormRules"
          :model="loginForm"
          :label-position="labelPosition"
        >
          <div class="login_select" style="">
            <el-select
              prefix="el-icon-mobile-phone"
              v-model="select"
              slot="prepend"
              placeholder="+86"
              style="width: 90px; height: 38px; border: none"
            >
              <template #prefix>
                <span style="padding-left: 3px; line-height: 38px">
                  <i class="el-icon-mobile-phone" style=""></i>
                </span>
              </template>
              <el-option
                label="+86"
                value="+86"
                style="width: 330px"
              ></el-option>
              <el-option label="+1" value="+1">美国 +1</el-option>
              <el-option label="+2" value="+2">韩国 +2</el-option>
            </el-select>
          </div>
          <el-form-item label="" prop="phone" style="padding: 0 10px">
            <el-input
              class="pd_left"
              style=""
              v-model.number="loginForm.phone"
              value=""
              clearable
              placeholder="请输入手机号码/邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input
              v-model="loginForm.verifycode"
              prefix-icon="el-icon-lock"
              suffix-icon=""
              placeholder="请输入验证码"
            >
              <i
                slot="suffix"
                @click="loginByPhoneAndVerifyCode(loginForm.phone)"
                style="cursor: pointer; color: #409eff; padding-right: 10px"
                >获取验证码</i
              >
              <!--                      <template #suffix>-->
              <!--                        <span @click="loginByPhoneAndVerifyCode(loginForm.phone)" style="cursor:pointer;color: #409EFF;padding-right: 10px;">获取验证码</span>-->
              <!--                      </template>-->
            </el-input>
            <!--                    <span v-on:click="loginByPhoneAndVerifyCode">验证码</span>-->
          </el-form-item>
          <div class="btn_login dialog-footer">
            <el-button
              type="primary"
              @click="submitForm('phone')"
              style="width: 100%"
              >登录/注册</el-button
            >
          </div>
        </el-form>
        <!-- form 表单 s-->
      </el-tab-pane>
      <el-tab-pane label="密码登录" name="codelogin">
        <!--              密码登录-->
        <el-form
          ref="loginFormRef2"
          :rules="loginFormRules2"
          :model="loginForm"
          :label-position="labelPosition"
        >
          <el-form-item label="" prop="user" style="padding: 0 10px">
            <el-input
              v-model.number="loginForm.user"
              prefix-icon="el-icon-mobile-phone"
              clearable
              placeholder="请输入手机号码/邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item label="" prop="pass">
            <el-input
              v-model="loginForm.pass"
              prefix-icon="el-icon-lock"
              suffix-icon=""
              :type="passwordType"
              placeholder="请输入密码"
            >
              <template #suffix>
                <i
                  class="el-icon-view"
                  :class="icon_view_bg"
                  @click="suffixView"
                  style="cursor: pointer"
                ></i>
              </template>
            </el-input>
          </el-form-item>
          <div class="btn_login dialog-footer">
            <el-button
              type="primary"
              @click="submitForm('pass')"
              style="width: 100%"
              >登录</el-button
            >
          </div>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div class="form-footer dialog-footer" style="">
      <div class="agreement agreement--is-show">
        <span class="greement_text">登录/注册</span>即代表您同意
        <a href="https://www.shixiseng.com/rule" class="agreement__link"
          >「实习僧用户协议及隐私政策」</a
        >
      </div>
    </div>
    <!--    </el-dialog>-->
  </div>
</template>

<script>
/* eslint-disable  */
import banaer1 from "@/assets/img/luobo1.jpg";
import banaer2 from "@/assets/img/luobo2.jpg";
import banaer3 from "@/assets/img/luobo3.jpg";
import banaer4 from "@/assets/img/luobo4.jpg";

export default {
  name: "log_dialog",
  props: {
    // eltabsActiveName: {
    //   type: String,
    //   defualt:''
    // }
  },
  data() {
    return {
      // 用户登录弹层
      passwordType: "password",
      icon_view_bg: "",
      // 默认展示短信登录
      // loginActiveName: 'smslogin',
      eltabsActiveName: "smslogin",
      labelPosition: "top",
      activeName: "first",
      // 表单验证
      loginFormRules: {
        phone: [
          { required: true, message: "登录名不能为空", trigger: "blur" },
          { type: "number", message: "必须为数字值", trigger: "blur" },
        ],
        verifycode: [
          { required: true, message: "验证码不能为空", trigger: "blur" },
        ],
      },
      loginFormRules2: {
        user: [
          { required: true, message: "登录名不能为空", trigger: "blur" },
          { type: "number", message: "必须为数字值", trigger: "blur" },
        ],
        pass: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
      //区号
      select: "",
      // 表单对象
      loginForm: {
        phone: 13128913638,
        password: "",
        user: "",
        pass: "",
        verifycode: "123456 ",
        select: "",
      },
      // 用户中心
    };
  },
  created() {
    // if (this.eltabsactivename !=''){
    // this.eltabsActiveName = this.eltabsactivename
    // }
    // console.log('mounted: ',this.eltabsActiveName)
  },
  methods: {
    // icon密码框事件
    suffixView() {
      if (this.passwordType == "password") {
        this.passwordType = "text";
        this.icon_view_bg = "icon_view_bg";
      } else {
        this.passwordType = "password";
        this.icon_view_bg = "";
      }
    },
    // 登录选项事件
    clickdialogFormVisible(tname) {
      this.dialogFormVisible = !this.dialogFormVisible;
      this.LofinActiveName = tname;
    },
    // 获取验证码
    // loginByPhoneAndVerifyCode?phone=13128913638&verifycode=123456
    loginByPhoneAndVerifyCode(phone) {
      console.log(phone);
      if (!phone) return;
    },
    // 登录
    submitForm() {
      const phone = this.loginForm.phone;
      const verifycode = this.loginForm.verifycode;
      let params = {
        phone,
        verifycode,
      };
      this.$http.login(params).then((res) => {
        console.log("login: ", res);
        localStorage.setItem("token", res.data.user.token);
        // 缓存 JavaScript 对象
        localStorage.setItem("userInfo", JSON.stringify(res.data.user));
        this.dialogFormVisible = !this.dialogFormVisible;
        this.userInfo = res.data.user;
        this.$router.push({ name: "/" });
        this.$router.go(0);
      });
    },
    // 提交登录
    submitForm2(e) {
      // 短信登录
      // loginByPhone?phone=13128913638&password=123456
      let url = "";
      if (e === "phone") {
        const phone = this.loginForm.phone;
        const verifycode = this.loginForm.verifycode;
        url = `loginByPhoneAndVerifyCode?phone=${phone}&verifycode=${verifycode}`;
      } else {
        const user = this.loginForm.user;
        const pass = this.loginForm.pass;
        url = `loginByPhone?phone=${user}&password=${pass}`;
      }
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;
        const { data } = await this.$http.post(url);
        // console.log(data);
        // return;
        if (data.errorcode === 0) {
          this.$message({
            type: "success",
            message: data.resultmsg,
          });
          // 登录成功，
          localStorage.setItem("token", data.user.token);
          // window.sessionStorage.setItem('token', data.user.token)
          // 缓存 JavaScript 对象
          localStorage.setItem("userInfo", JSON.stringify(data.user));
          this.dialogFormVisible = !this.dialogFormVisible;
          this.userInfo = data.user;
          this.$router.push({ name: "/" });
          this.$router.go(0);
          // this.$router.forward({ name: 'defualt' });
        } else {
          // 登录失败，返回失败的原因
          this.$message({
            type: "error",
            message: data.resultmsg,
          });
        }
      });
    },
  },
};
</script>

<style scoped>
/* 弹层登录框 s */
.icon_bg,
.icon_view_bg {
  color: #252527;
}
.loginarea >>> .el-form-item {
  padding: 0px 20px !important;
  /* height: 440px!important; */
  box-sizing: border-box;
}
.loginarea >>> .el-select {
  padding: 0 !important;
  /* background-color: #ffffff!important; */
}
.loginarea >>> .el-tabs__nav-scroll {
  height: 55px;
  width: 50% !important;
  margin: 0 auto !important;
}
.loginarea >>> .el-tabs__nav-wrap::after {
  /* bottom: none; */
  bottom: unset;
}
.login_select {
  height: 0;
  width: 40px;
  padding-left: 22px;
  /* margin-left: 2px; */
  z-index: 2182;
  position: relative;
  transform: translateY(1px);
  box-sizing: border-box;
}
.login_select >>> .el-input__inner {
  border: 0 !important;
  height: 37px;
  line-height: 37px;
}
.login_select >>> .el-input {
  height: 35px;
  /* margin-top: 2px; */
  box-sizing: border-box;
}
.login_select >>> .el-input__inner,
.login_select >>> .el-input__prefix,
.login_select >>> .el-input__suffix {
  box-sizing: border-box;
  border: 0 !important;
  height: 37px;
  background-color: unset;
}
.loginarea .btn_login {
  text-align: center;
  padding: 0px 20px;
}
.loginarea .pd_left >>> .el-input__inner {
  padding-left: 110px !important;
}
.loginarea >>> .el-tabs__item {
  font-size: 18px;
}
.loginarea .form-footer {
  padding: 20px 20px 0;
  text-align: center;
  font-size: 14px;
  color: #999999;
}
.loginarea .form-footer .agreement__link {
  color: #6aa2e4;
  cursor: pointer;
}
/* 弹层登录框 e */
</style>
